﻿<!--个人中心-->
<div class="userCenter boxStyle"  >
    <!--左侧导航栏-->
    <div class="user-left boxStyle">
        <div class="user-left-top">
            <img src="front/image/toux1.jpg" class="user-touxiang">
            <p>我就是一个名字</p>
            <p>西安 | 工程监理</p>
        </div>
        <ul class="userOperate">
            <li class="now">个人资料</li>
            <li>修改密码</li>
            <li>皮肤管理</li>
            <li>桌面设置</li>
        </ul>
        <a href="login.html" class="backout">退出登录</a>
    </div>
    <!--右侧内容-->
    <div class="user-right boxStyle">
        <!--个人资料-->
        <div class="user-data" style="display:none" >
            <div class="textcenter" style="margin-bottom:30px;">
                <div class="user-avatars-box">
                    <img src="front/image/toux1.jpg" class="user-avatars">
                    <span class="opacity-layer">修改头像</span>
                </div>
                <p>我就是一个名字</p>
            </div>
            <form>
                <p class="userDataTitle">基本信息</p>
                <ul>
                    <li><span>手机号码：</span><input type="tel" name="userTel" value="老张"></li>
                    <li><span>邮箱：</span><input type="email" name="userEmail" value="laozhang@sina.com"></li>
                    <li><span>性别：</span>
                        <label>
                            <input type="radio" name="sex" value="boy">男
                            <input type="radio" name="sex" value="girl">女
                        </label>
                    </li>
                    <li><span>出生日期：</span><input type="date" class="date" name="userDate"></li>
                    <li><span>现居所：</span><input type="text" name="userDress" value="北京天安门"></li>
                    <li><span>所在公司：</span><input type="text" name="userCompany" value="北京时代科技"></li>
                    <li><span>所在部门：</span><input type="text" name="userDepart" value="北京时代科技"></li>
                    <li><span>办公电话：</span><input type="text" name="userPhone" value="028-88888888"></li>
                    <li><span>个性签名：</span><textarea type="text" name="userSignature"></textarea></li>
                </ul>
                <button class="userDataSave">保存</button>
            </form>

        </div>
        <!--修改密码-->
        <div class="modifyPassword" style="display:none">
            <p class="userDataTitle">修改密码</p>
            <form>
                <input type="text" name="oldPassword" placeholder="原始密码">
                <br>
                <input type="text" name="newPassword" placeholder="新的密码">
                <br>
                <button>确定</button>
            </form>
        </div>
        <!--皮肤管理-->
        <div class="skinAdm">
            <p class="skinTitle">皮肤管理</p>
            <div class="skin-bot">
                <p>精选皮肤</p>
                <div class="swiper-container skin-con">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide green">
                            <span class="slin-slide-span">草木绿</span>
                            <span class="useSkin">使用</span>
                            <img src="front/image/green.jpg">
                        </div>
                        <div class="swiper-slide brown">
                            <span class="slin-slide-span">榛果褐</span>
                            <span class="useSkin">使用</span>
                            <img src="front/image/brown.jpg">
                        </div>
                        <div class="swiper-slide blue">
                            <span class="slin-slide-span">岛屿天堂蓝</span>
                            <span class="useSkin">使用</span>
                            <img src="front/image/blue.jpg">
                        </div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-pagination"></div>
                </div>

                <p class="nowSkin-box">
                    当前皮肤<br>
                    <span class="nowSkin">天然橙</span><br>
                    <span class="returnSkin">恢复默认设置</span>
                </p>
            </div>
        </div>
        <!--桌面设置-->
        <div class="desktopSet" style="display:none">
            <p class="skinTitle">桌面设置<span>（选中后我的桌面显示该模块，取消选择将不显示该页面）</span></p>
            <p class="zhuoArrow">
                <span>我的页面待选内容</span>
                <span style="float:right">我已选好的模块内容</span>
            </p>
            <ul class="waitSele">
                <li>邮件wait</li>
                <li>日程wait</li>
                <li>任务wait</li>
                <li>待办wait</li>
                <li>邮件wait</li>
                <li>日程wait</li>
                <li>任务wait</li>
                <li>待办wait</li>
                <li>邮件wait</li>
                <li>日程wait</li>
                <li>任务wait</li>
                <li>待办wait</li>
            </ul>
            <ul class="isSele">
                <li>邮件is</li>
                <li>日程is</li>
                <li>任务is</li>
                <li>待办is</li>
            </ul>
            <div style="clear:both"></div>
        </div>
    </div>
</div>